<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style type="text/css">
		.radio-group {
			display: inline-block;
			font-size: 0;
		}
		.radio-group > label {
			position: relative;
			display: inline-block;
			box-sizing: border-box;
		    height: 32px;
		    line-height: 32px;
		    padding: 0 16px;
		    margin-left: -1px;
		    border: 1px solid #1ab394;
		    border-radius: 1px;
		    background: #fff;
		    text-align: center;
		    font-size: 16px;
		    color: #1ab394;
		    overflow: hidden;
		    cursor: pointer;
		}
		.radio-group > input:first-child + label {
			margin-left: 0;
		}
		.radio-group > input[type="radio"] {
		    display: none;	
		    /*margin-left:-999999px;*/	  
		    /*opacity: 0;
		    filter: alpha(opacity=0); */ 
		}
		/*IE8及以下不支持:checked伪类*/
		/*.radio-group > input[type="radio"]:checked + label {
		    background: #1ab394;
		    color: #fff;
		    box-shadow: 0 1px 1px #555 inset;
		    z-index: 1;		
		}*/
		.radio-group > label.checked {
		    background: #1ab394;
		    color: #fff;
		    box-shadow: 0 1px 1px #555 inset;
		    z-index: 1;		
		}
	</style>
</head>
<body>
	<div class="radio-group">
		<input type="radio" name="radio-group" id="radio1"/>
		<label for="radio1">radio1</label>
		<input type="radio" name="radio-group" id="radio2"/>
		<label for="radio2">radio2</label>
		<input type="radio" name="radio-group" id="radio3"/>
		<label for="radio3">radio3</label>
	</div>
	<script type="text/javascript">
		window.onload = function(){
			// IE8及以下不支持getElementsByClassName/addEventListener
			var labels = document.getElementsByTagName("label");	
			var len = labels.length;		
			for(var i = 0; i < len; i++){
				labels[i].onclick = function(event){
					var e = window.event || event;//IE中event对象访问方式取决于事件绑定方法	
					var target = e.target || e.srcElement;				
					/*var checkedLabel = document.getElementsByClassName("checked")[0];			
					if(checkedLabel){
						checkedLabel.className = '';						
					}*/
					for(var i = 0; i < len; i++){
						labels[i].className = '';
					}
					target.className = 'checked';					
				};
			}
		};
	</script>
</body>
</html>